<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<style type="text/css">
*{margin:0px; padding:0px;}
.myApp-item{margin-bottom: 60px;}
.main{width:100%;}
.main-box-top{width: 100%; height: 50px; line-height: 50px; overflow: hidden; border-bottom: 1px solid red;}
.main-box-top-item{width: 25%; float: left; text-align: center; cursor:pointer;}
.main-box-top-item.active{color:red;}
.main-box-bottom-item{display: none;}
.main-box-bottom-item.active{display: block;}
</style>
</head>
<body>
<!--
异步组件参考解决方案：https://segmentfault.com/a/1190000010892015
常规组件：https://cn.vuejs.org/v2/guide/components.html
动态组件：https://cn.vuejs.org/v2/guide/components.html#动态组件
函数组件：https://cn.vuejs.org/v2/guide/render-function.html
异步组件和高级异步组件：https://cn.vuejs.org/v2/guide/components-dynamic-async.html#异步组件
-->
<div id='myApp' >
    <div class="myApp-item">
        <buttoncounter></buttoncounter>
        <button-counter></button-counter>
        <async-example></async-example>
    </div>
</div>
<script type="text/javascript">
// 简单组件
Vue.component('buttoncounter', {
    data: function () {
        return {
            count: 0
        }
    },
    template: '<button>我是一个简单的组件</button>'
});
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
    data: function () {
        return {
            count: 0
        }
    },
    template: '<button>我还是一个简单的组件</button>'
});
// 异步组件
// 异步组件
Vue.component('async-example',function (resolve, reject) {
    setTimeout(function () {
        // 向 `resolve` 回调传递组件定义
        resolve({
            data:function(){
                return {
                    message:'zhaozilong'
                }
            },
            template: '<button>我是异步组件sdf{{message}}</button>'
        })
    }, 1000)
});
var myApp = new Vue({
    el:"#myApp",
    data:{
        nav:[
            {id:0,title:'首页',active:true},
            {id:1,title:'发现',active:false},
            {id:2,title:'订单',active:false},
            {id:3,title:'我的',active:false},
        ],
        htmlData:"<div class='main'><div class='main-box-top'><div class='main-box-top-item' v-for='(x,k) in nav' :class='{\"active\":x.active}' @click='openNav(k)' v-text='x.title'></div></div><div class='main-box-bottom'><ul class='main-box-bottom-item' :class='{\"active\":nav[0].active}'><li>首页</li><li>首页</li><li>首页</li><li>首页</li><li>首页</li><li>首页</li></ul><ul class='main-box-bottom-item' :class='{\"active\":nav[1].active}'><li>发现</li><li>发现</li><li>发现</li><li>发现</li><li>发现</li><li>发现</li></ul><ul class='main-box-bottom-item' :class='{\"active\":nav[2].active}'><li>订单</li><li>订单</li><li>订单</li><li>订单</li><li>订单</li><li>订单</li></ul><ul class='main-box-bottom-item' :class='{\"active\":nav[3].active}'><li>我的</li><li>我的</li><li>我的</li><li>我的</li><li>我的</li><li>我的</li></ul></div></div>"
    },
    mounted:function(){},
    methods:{
        openNav:function(k){
            console.log(k);
            this.changeNav(k);
        },
        changeNav:function(key){
            this.nav.forEach((i,k)=>{
                this.nav[k].active = false;
            });
            this.nav[key].active = true;
        },
    }
});
</script>
<!-- vue.js 组件
<script type="text/javascript">
    var vue = new Vue({
    el:"#dynamic",
    data: {
        currentView: "home"
    },
    components: {
        home:{
            template: "Home"
        },
        posts: {
            template: "Posts"
        },
        archive: {
            template: "Archive"
        }
    }
}); 
</script>
 -->
</body>
</html>